<!-- file flow -->
<script> 
	
	$(function(){
	
		/***********************************************
		
			field.datepicker({ dateFormat : 'dd-mm-yy'});
			field.getCombobox({ task : "task"},"id","name");

		************************************************/
		
	
		/* REMOVE DUPLICATE ID */
		var ids = [];
		$('*').each(function() {
		    if (this.id && this.id !== '') {
		        if (ids[this.id]) {
		            $(this).remove();
		        } else {
		            ids[this.id] = this
		        }
		    }
		});
		
		$.fn.getCombobox = function(data, key, label){
			var field = $(this);
			$.ajax({
				url : "c_public_function",
				data : data,
				type : 'POST', dataType : 'json'
			}).done(function(response){
				for(i=0;i<response.length;i++){
					field.append("<option value="+response[i][key]+">"+response[i][label]+"</option>");
				}
					field.chosen();
			});
		}
		
		/* external function */
		
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
		/* declarisasi */
		
		task_flow = $("#task_flow");
		grid_flow = $("#grid-flow");
		pgrid_flow = $("#pgrid-flow");
		btnadd_flow = $("#btn-add-flow");
		btnedit_flow = $("#btn-edit-flow");
		btndelete_flow = $("#btn-delete-flow");
		btncancel_flow =  $("#btn-cancel-flow");
		btnsave_flow = $("#btn-save-flow");
		form_flow = $("#form-flow");
		
		field_flow_id = $("#flow_id");
		field_flow_name = $("#flow_name");
		field_flow_code = $("#flow_code");
		field_flow_subcode = $("#flow_subcode");
		field_tbl_detail = $("#tbl_detail");
		
		ul_flowdiv = $("#ul_flowdiv");
		ul_listdiv = $("#ul_listdiv");
		
		/* method started */
		
		$( "input[type=submit],input[type=button],input[type=reset], button" ).button();
			
		/* make component */
		
		grid_flow.jqGrid({ 
			ajaxGridOptions : {type:"POST"},
			serializeGridData : function(postdata) {return postdata; },
			postData : {task : 'LIST'},
            url: 'c_flow',
			datatype: "json", 
			colNames:[
				'Nama Flow',
				'Kode Flow',
				'Sub Kode Flow',
				'flow_id'],
			colModel:[
				{ name: 'flow_name'  ,index: 'flow_name' , search : true},
				{ name: 'flow_code'  ,index: 'flow_code' , search : true},
				{ name: 'flow_subcode'  ,index: 'flow_subcode' , search : true},
				{ name: 'flow_id'  ,index: 'flow_id',key: true, hidden: true , search : false}
			],
			width: '700',
			height: 'auto',
			rowNum:10, 
			rowList:[10,20,30], 
			pager: '#pgrid-flow', 
			sortname: 'flow_id', 
			viewrecords: true, 
			sortorder: "desc",
			caption:"" 
		}); 
		grid_flow.jqGrid('navGrid','#pgrid-flow',{edit:false,add:false,del:false,search:false});
		grid_flow.jqGrid('filterToolbar',{});
		
		form_flow.dialog({
			autoOpen: false,
			height: "auto",
			width: "auto",
			modal: true
		});
		
		/* event */

		btnedit_flow.click(function(){
			id = grid_flow.jqGrid("getGridParam","selrow");
			if (id != null){
				task_flow.val("UPDATE");
				dataRow = grid_flow.getRowData(id);
				field_flow_id.val(dataRow.flow_id);
				field_flow_name.val(dataRow.flow_name);
				field_flow_code.val(dataRow.flow_code);
                field_flow_subcode.val(dataRow.flow_subcode);
			
				$.ajax({
					url : "c_public_function",
					data : {task : "flowdetfortable", flow_id : dataRow.flow_id},
					type : 'POST', dataType : 'json'
				}).done(function(response){
					ul_flowdiv.html("");
					ul_listdiv.html("");
					for(i=0;i<response.length;i++){
						if (response[i].used_name != null){
							ul_flowdiv_html = "<li data-id='"+response[i].used_id+"'>"+response[i].used_name+
								"&nbsp;</li>";
							ul_flowdiv.append(ul_flowdiv_html);
							
						}
						
						ul_listdiv_html = $("<li data-id='"+response[i].div_id+"'>"+response[i].div_name+
							"&nbsp;</li>");
						ul_listdiv.append(ul_listdiv_html);
							
						if (response[i].notused_name == null){
							ul_listdiv_html.hide();
						}
					}
					ul_listdiv.sortable({
						revert: true
					});
					
					ul_flowdiv.sortable({
						revert: true
					});
					
					$( "ul, li" ).disableSelection();
					ul_listdiv.find("li").draggable({
					  connectToSortable: "#ul_flowdiv",
					  helper: "clone",
					  revert: "invalid",
					  stop: function() {
						if (ul_flowdiv.find("li:contains('"+$(this).text()+"')").length > 0){
							$(this).remove();
						}
					  }
					});
					
					ul_listdiv.droppable({});
					
					$(".deletehere").droppable({
					  drop: function( event, ui ) {	
						var li = ul_listdiv.find("li:contains('"+$(ui.draggable).text()+"')");
						if (li.is(":hidden")){
							li.show();
							// var li = "<li data-id='"+$(ui.draggable).data("id")+"' >"+$(ui.draggable).html()+"</li>";
							// ul_listdiv.append(li);
							$(ui.draggable).remove();
							
						}
					  }
					});
				});
				
				form_flow.dialog("open");
			}
		});
		
		btndelete_flow.click(function(){
			id = grid_flow.jqGrid("getGridParam","selrow");
			if (id != null){
				confr = confirm("Apa Anda yakin menghapus data ini?");
				if (confr){
					$.ajax({
						type: 'POST',
						url: 'c_flow',
						data: {flow_id: id, task : 'DELETE'},
						success: function(response){
							if(response==1){
								grid_flow.trigger('reloadGrid');
								$("#grid-flow").trigger('reloadGrid');
							}
						}
					});
				}
			}
		});
		
		btnadd_flow.click(function(){
			task_flow.val("INSERT");
			form_flow.dialog("open");
		});
		
		btncancel_flow.click(function(){
			form_flow.dialog("close");
		});
		
		btnsave_flow.click(function(){
			data = form_flow.serializeObject();
			flowdiv_id = [];
			ul_flowdiv.find("li").each(function(a,child){
				var child = $(child);
				flowdiv_id.push(child.data("id"));
			});
			data.flowdiv_id = flowdiv_id;
			$.ajax({
				url : "c_flow",
				data : data,
				type : 'POST'
			}).done(function(response){
				grid_flow.trigger('reloadGrid');
				btncancel_flow.click();
			});
		});
		
	});
</script>

	<style>
	#tbl_detail ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
	#tbl_detail li { margin: 5px; padding: 5px; width: 75px; background : #eee; cursor : pointer;}
	#tbl_detail td { border : 1px solid #333; }
	.deletehere{ margin: 5px; padding: 5px; width: 75px; border : 1px solid #e00; text-align: center;}
	</style>
	<table id="grid-flow" class="table table-striped table-bordered" ></table>
	<div id="pgrid-flow"></div>
	
	<button id="btn-add-flow" style="display:none;">Tambah</button>
	<button id="btn-edit-flow">Ubah</button>
	<button id="btn-delete-flow"  style="display:none;">Hapus</button>
	
	<form id="form-flow" title="flow" disabled=true>
		<input type="hidden" value="INSERT" name="task" id="task_flow">
	   <table>
			<tr style="display: none">
				<td align="right">flow_id:</td>
				<td align="left"><input id="flow_id" name="flow_id" /></td>
			</tr>
			
			<tr > <td align="right">Nama Flow:</td> <td align="left"><input id="flow_name" name="flow_name" style="width:300px" /></td> </tr>
			<tr > <td align="right">Kode Flow:</td> <td align="left"><input id="flow_code" name="flow_code" style="width:100px" /></td> </tr>
			<tr > <td align="right">Sub Kode Flow:</td> <td align="left"><input id="flow_subcode" name="flow_subcode" style="width:100px" /></td> </tr>
			<tr valign="top"> <td align="right">Detail:</td> <td align="left">
			<table id="tbl_detail" >
			<tr valign=top>
				<td>
				Tersedia
				</td><td>
				Digunakan
				</td>
			</tr>
			<tr valign=top>
				<td>
				<ul id="ul_listdiv"></ul>
				<div class="deletehere">Drop disini jika tidak digunakan</div>
				<td>
				<ul id="ul_flowdiv"></ul></td>
			</tr>
			</table>
			</td> </tr>
			
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right">
					<input style="margin-right: 5px;" type="button" id="btn-save-flow" value="Simpan"  />
					<input id="btn-cancel-flow" type="reset" value="Batal" /></td>
			</tr>
		</table>
	</form>